<template>
    <AbsoluteContainer>
        <div class="alarm">
            <page-header title="用户管理" />
            <page-main>
                <!-- 表格搜索行 -->
                <el-form ref="searchForm" :model="searchForm" :inline="true">
                    <el-form-item label="用户名" prop="loginname">
                        <el-input
                            v-model="searchForm.loginname"
                            placeholder="输入用户名查询"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="所在城市" prop="city">
                        <el-input
                            v-model="searchForm.city"
                            placeholder="输入所在城市查询"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>

                    <el-form-item label="部门" prop="department">
                        <el-select
                            v-model="searchForm.department"
                            placeholder="选择部门查询"
                            clearable
                        >
                            <el-option
                                v-for="dict in departmentStatusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户类别" prop="user_type">
                        <el-input
                            v-model="searchForm.user_type"
                            placeholder="输入用户类别查询"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="initPage"
                        >
                            搜索
                        </el-button>
                        <el-button
                            icon="el-icon-refresh"
                            @click="handleReset"
                        >
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-row>
                    <download-excel
                        class="export-excel-wrapper inline-block"
                        :data="recordList"
                        :fields="json_fields"
                        :header="title"
                        name="用户清单.xls"
                    >
                        <el-button
                            type="success"
                            size="small"
                            style="margin-bottom: 15px;"
                            @click="exportAllData"
                        >
                            导出
                        </el-button>
                    </download-excel>
                </el-row>
                <el-table
                    ref="alarmTable"
                    v-loading="loading"
                    :data="recordList"
                    :header-cell-style="{
                        background: '#eef1f6',
                        color: '#606266'
                    }"
                    style="width: 100%; overflow-y: auto;"
                    :row-style="{ height: '35px' }"
                    :cell-style="{ padding: '0' }"
                    border
                    stripe
                    highlight-current-row
                    :default-sort="{
                        prop: 'powervalue',
                        order: 'descending'
                    }"
                >
                    <el-table-column
                        prop="loginname"
                        label="用户名"
                        min-width="50"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.loginname }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="city"
                        :show-overflow-tooltip="true"
                        label="所在城市"
                        min-width="50"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.city }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="department"
                        :show-overflow-tooltip="true"
                        label="部门"
                        min-width="30"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.department }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="user_type"
                        :show-overflow-tooltip="true"
                        label="用户类别"
                        min-width="50"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.user_type }}
                        </template>
                    </el-table-column>
                </el-table>
            </page-main>
        </div>
    </AbsoluteContainer>
</template>

<script>
import api from "@/api";
export default {
    data() {
        return {
            recordList: [],
            searchForm: {},
            departmentStatusOptions: [
                { dictValue: "网络运营中心", dictLabel: "网络运营中心" },
                { dictValue: "监控室", dictLabel: "监控室" }
            ],
            loading: false,
            exportShow: false,
            title: "用户清单",
            json_fields: {
                用户名: "loginname",
                所在城市: "city",
                部门: "department",
                用户类别: "user_type"
            }
        };
    },
    computed: {
        getLabel() {
            return (val, list) => {
                let obj = "";
                obj = list.find(item => item.dictValue == val);
                return obj.dictLabel;
            };
        }
    },
    mounted() {
        // vue页面刚加载时自动执行
        this.initPage();
        this.$nextTick(() => {
            // 获取表头高度，然后设置 .el-table__body-wrapper 的 height
            let height = document.getElementsByClassName(
                "el-table__header-wrapper"
            )[0].offsetHeight;
            document.getElementsByClassName(
                "el-table__body-wrapper"
            )[0].style.height = `calc(100% - ${height}px)`;
        });
    },
    methods: {
        initPage: function() {
            console.log("初始化数据");
            let params = Object.assign(
                {
                    page: 1,
                    size: 20,
                    token: this.$store.state.user.token
                },
                this.searchForm
            );
            var that = this;
            api.get("/electricApi/datauser/", {
                params: params
            }).then(function(response) {
                console.log(response.results);
                that.recordList = response.results;
            });
        },
        parseDateFull(time) {
            var x = new Date(time);
            var z = {
                y: x.getFullYear(),
                M: x.getMonth() + 1,
                d: x.getDate(),
                h: x.getHours(),
                m: x.getMinutes(),
                s: x.getSeconds()
            };
            if (z.M < 10) {
                z.M = "0" + z.M;
            }
            if (z.d < 10) {
                z.d = "0" + z.d;
            }
            if (z.h < 10) {
                z.h = "0" + z.h;
            }
            if (z.m < 10) {
                z.m = "0" + z.m;
            }
            return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m;
        },
        handleReset() {
            this.searchForm = {};
            this.initPage();
        },
        exportAllData() {
            this.loading = true;
            let _this = this;
            let params = Object.assign(
                {
                    page: 1,
                    size: 20,
                    token: this.$store.state.user.token
                },
                this.searchForm
            );
            this.$api
                .get("/electricApi/datauser/", {
                    params: params
                })
                .then(res => {
                    _this.loading = false;
                    _this.pageSize = 999999;
                    _this.recordList = res.results;
                    _this.total = res.count;
                    if (_this.total != 0) {
                        _this.exportShow = true;
                    } else {
                        _this.exportShow = false;
                    }
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.alarm {
    height: 90vh;
    overflow: scroll;
}
.page-main {
    display: flex;
    flex-direction: column;

    // 减去的 40px 为 page-main 的上下 margin
    // 减去的 130px 为 page-header 的高度，如果没有设置，可以去掉

    //height: calc(100% - 40px);加页头前的高度
    height: calc(100% - 105px);
    ::v-deep .el-table {
        height: 100%;
        .el-table__body-wrapper {
            overflow-y: auto;
        }
    }
}
.task {
    float: left;
    margin-right: 15px;
}
.itembadge {
    float: right;
    margin-right: 5px;
}
</style>
